<template>
  <div id="index">
    <el-card  style="height: 89vh;overflow: auto;">
      <el-input
        placeholder="请输入地址"
        v-model="input3"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search" @click="inputfz"
          >搜索</el-button
        >
      </el-input>


    <baidu-map class="map" center="西安" scroll-wheel-zoom>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_TOP_LEFT"
      ></bm-map-type>
      <bm-city-list anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-city-list>
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <bm-local-search
        :keyword="keyword"
        @searchcomplete="search"
        :auto-viewport="true"
        class="search"
      ></bm-local-search>
    </baidu-map>
  </el-card>
  </div>
</template>

<script>
import { BaiduMap, BmLocalSearch, BmGeolocation } from "vue-baidu-map";
export default {
  data() {
    return {
      //定位位置信息
      center: {},
      //检索关键字
      keyword: "",
      //输入框input值
      input3: "",
    };
  },
  components: {
    BaiduMap,
    BmLocalSearch,
    BmGeolocation,
  },
  methods: {
    //输入框
    inputfz() {
      this.keyword = this.input3;
    },
    //地图加载后的回调
    mapReady({ BMap }) {
      //保存this指向，因为在百度的回调中this不指向vue
      const _this = this;
      // 获取自动定位方法
      var geolocation = new BMap.Geolocation();
      // 获取自动定位获取的坐标信息
      geolocation.getCurrentPosition(
        function (r) {
          //可以conso.log看一下这个r，他里面包含了检索到的位置信息。下面就把两个维度信息赋值给center来定位
          _this.center = {
            lng: r.point.lng,
            lat: r.point.lat,
          };
        },
        //启用高精度
        { enableHighAccuracy: true }
      );
    },
  },
};
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 700px;
}
</style>